<template>
  <div class="rankList_wrap">
    <headTop :headClass="'white_header'">Ranking List</headTop>
    <div class="scroll_wrap">
      <div class="kong"></div>
      <!-- The first -->
      <div class="top_one">
        <div class="one_left">
          <img src="./../image/gold_medal.png" alt="gold medal">
        </div>
        <div class="one_right">
          <div class="box_bg">
            <img class="imperial_crown" src="./../image/imperial_crown.png" alt="An crown">
            <img class="header_img" :src="rankList[0].avatar" alt="Head portrait">
            <img class="num_one" src="./../image/bg2_03.png" alt="The first">
            <div class="nick">{{rankList[0].username}}</div>
          </div>
          <div class="diot">{{rankList[0].return_point}}<span>Return point</span></div>
        </div>
      </div>
      <ul class="rank_list">
        <!-- Proxime accessit -->
        <li class="rank_item">
          <div class="item_left">
            <img class="rank" src="./../image/silver_medal.png" alt="Place of name">
            <img class="img_" :src="rankList[1].avatar" alt="Head portrait">
            <span class="nick_name">{{rankList[1].username}}</span>
          </div>
          <div class="item_right">{{rankList[1].return_point}} Return point</div>
        </li>
        <!-- Third -->
        <li class="rank_item">
          <div class="item_left">
            <img class="rank" src="./../image/bronze_medal.png" alt="Place of name">
            <img class="img_" :src="rankList[2].avatar" alt="Head portrait">
            <span class="nick_name">{{rankList[2].username}}</span>
          </div>
          <div class="item_right">{{rankList[2].return_point}} Return point</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rankList',
  data () {
    return {
      rankList: [
        {
          avatar: '',
          return_point: '',
          username: ''
        },
        {
          avatar: '',
          return_point: '',
          username: ''
        },
        {
          avatar: '',
          return_point: '',
          username: ''
        }
      ]
    };
  },
  methods: {
    getInfo () {
      this.axios.get('index/users/paih').then(({data}) => {
        if (data.status === 200) {
          this.rankList = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.getInfo();
  }
};
</script>

<style lang="scss" scpoed>
  .rankList_wrap{
    height: 100%;
    padding-top: 90px;
    background-color: #f4f5f7;
    .scroll_wrap {
      height: 100%;
      overflow-y: scroll;
      .kong {
        width: 100%;
        height: 20px;
        background: #f4f5f7;
      }
      .top_one {
        border-bottom: 1Px solid #e6e6e6;
        padding: 0 30px;
        background: #fff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 530px;
        position: relative;
        .one_left {
          width: 70px;
          position: absolute;
          top: 33%;
          img {
            width: 69px;
            height: 84px;
          }
        }
        .one_right {
          margin: 0 auto;
          .box_bg {
            background: url('./../image/bg1_03.png') no-repeat;
            width: 400px;
            height: 363px;
            background-size: cover;
            background-position-y: -30px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            .imperial_crown {
              width: 136px;
              height: 98px;
              position: absolute;
              top: 0;
              left: 27%;
              z-index: 20;
            }
            .header_img {
              display: block;
              width: 164px;
              height: 164px;
              border-radius: 50%;
              border: 2px solid #fff;
              position: absolute;
              top: 22%;
              left: 28%;
            }
            .num_one {
              width: 177px;
              height: 53px;
              position: absolute;
              top: 52%;
              left: 26%;
              z-index: 20;
            }
            .nick {
              font-size: 30px;
              color: #222222;
              position: absolute;
              bottom: 13%;
              text-align: center;
              margin: 0 auto;
              width: 100%;
            }
          }
          .diot {
            font-size: 34px;
            font-weight: bold;
            color: #fe6e3a;
            margin: 0 auto;
            text-align: center;
            span {
              font-weight: normal;
              font-size: 30px;
              color: #222222;
              padding-left: 10px;
            }
          }
        }
      }
      .rank_list {
        background: #fff;
        .rank_item {
          height: 175px;
          border-bottom: 1Px solid #e5e5e5;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;
          &:last-child {
            border-bottom: none;
          }
          .item_left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 28px;
            color: #222222;
            .rank {
              width: 59px;
              height: 71px;
            }
            .img_ {
              width: 84px;
              height: 84px;
              margin-left: 32px;
              margin-right: 26px;
              border-radius: 50%;
            }
          }
          .item_right {
            font-size: 30px;
            color: #222222;
          }
        }
      }
    }
  }
</style>
